<script setup>
import { watch } from 'vue';
const form= {
              username: "",
              password: "",
              confirmPassword: "",
              age: 0,
              gender: "男",
              hobby: [],
              jog: "前端开发工程师",
              bio: "",
            };
            const dialogVisible= false;

          const onSubmit = () => {
            this.dialogVisible = true;
          };
          const onConfirm= () => {
            this.dialogVisible = false;
            ElMessage({
              message: "注册成功",
              type: "success",
            });
          };
        watch(
          () => form,
            (newUser, oldUser) => {
              if (newUser.username && newUser.username.length < 4) {
                ElMessage.error("用户名长度必须大于等于4个字符");
                return;
              }
              if (newUser.password && newUser.password.length < 6) {
                ElMessage.error("密码长度必须大于等于6个字符");
                return;
              }
              if (newUser.password !== newUser.confirmPassword) {
                ElMessage.error("两次输入的密码不一致");
                return;
              }
            },
            { deep: true }
);
</script>
<template>
<el-main class="main">
          <div style="width: 480px; margin: 0 auto">
            <h2>注册</h2>
            <el-form :model="form" label-width="auto" style="max-width: 600px">
              <el-form-item label="用户名">
                <el-input v-model="form.username" />
              </el-form-item>
              <el-form-item label="密码">
                <el-input v-model="form.password" type="password" />
              </el-form-item>
              <el-form-item label="确认密码">
                <el-input v-model="form.confirmPassword" type="password" />
              </el-form-item>
              <el-form-item label="年龄">
                <el-input v-model="form.age" />
              </el-form-item>
              <el-form-item label="性别">
                <el-radio-group v-model="form.gender">
                  <el-radio value="男">男</el-radio>
                  <el-radio value="女">女</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="兴趣爱好">
                <el-checkbox-group v-model="form.hobby">
                  <el-checkbox value="阅读" name="type"> 阅读 </el-checkbox>
                  <el-checkbox value="运动" name="type"> 运动 </el-checkbox>
                  <el-checkbox value="旅行" name="type"> 旅行 </el-checkbox>
                  <el-checkbox value="数码" name="type"> 数码 </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="职业">
                <el-select v-model="form.job" placeholder="请选择职业">
                  <el-option label="前端开发工程师" value="前端开发工程师" />
                  <el-option label="后端开发工程师" value="后端开发工程师" />
                  <el-option label="产品设计师" value="产品设计师" />
                  <el-option label="运维工程师" value="运维工程师" />
                </el-select>
              </el-form-item>
              <el-form-item label="自我介绍">
                <el-input v-model="form.bio" type="textarea" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">提交</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-main>
</template>

<style scoped></style>